import { ref } from "vue"
import { useIntersectionObserver } from '@vueuse/core'

export const lazyLoadData = (apiFn, params) => {
    const list = ref([])
    const target = ref(null)

    const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
        if (isIntersecting) {
            apiFn(params).then(({ result = [] }) => {
                list.value = result
            }).catch(err => {
                console.log(err);
            })
            stop()
        }
    })

    return { list, target }
}